<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>OSRM Website</title>
    <meta name="description" content="OSRM Website"/>
    <meta name="author" content="Dennis Schieferdecker"/>
    <link rel="stylesheet" href="leaflet/leaflet.css" type="text/css"/>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="leaflet/leaflet.ie.css" type="text/css"/><![endif]-->
    <link rel="stylesheet" href="main.css" type="text/css"/>
    <script src="leaflet/leaflet.js" type="text/javascript"></script>
    <script src="OSRM.js" type="text/javascript"></script>
</head>
<body class="base-font">
<noscript id="no-js-warning">
    <div class="error-header">No Javascript</div>
    <div class="error-body">Javascript is required for the OSRM website to work. Please enable Javascript and reload the
        page.
    </div>
</noscript>
<div id="old-browser-warning">
    <div class="error-header">Unsupported browser</div>
    <div class="error-body">You are using a browser that is not supported by the OSRM website. Please switch or upgrade
        to a more recent browser.
    </div>
</div>
<div id="map"></div>
<div id="gui">
    <div id="exclusive-notification-blanket">
        <div id="exclusive-notification-wrapper" class="box-wrapper not-selectable">
            <div id="exclusive-notification-content" class="box-content">
                <div id="exclusive-notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
                <div id="exclusive-notification-label" class="box-label">Notification</div>
                <div id="exclusive-notification-box"></div>
            </div>
        </div>
    </div>
    <div id="tooltip-notification-wrapper" class="box-wrapper not-selectable">
        <div id="tooltip-notification-content" class="box-content">
            <div id="tooltip-notification-toggle" class="iconic-button cancel-marker top-right-button"></div>
            <div class="quad top-right-button"></div>
            <div id="tooltip-notification-resize" class="iconic-button cancel-marker top-right-button"></div>
            <div id="tooltip-notification-label" class="box-label">Notification</div>
            <div id="tooltip-notification-box"></div>
        </div>
    </div>
    <div id="config-wrapper" class="box-wrapper">
        <div id="config-content" class="box-content">
            <div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
            <div id="gui-config-label" class="box-label">Configuraion</div>
            <div class="full">
                <div class="row">
                    <div class="left fixed"><span id="gui-language-2-label" class="config-label">Language:</span></div>
                    <div class="left stretch"><select id="gui-language-2-toggle" class="config-select"></select></div>
                </div>
                <div class="row">
                    <div class="left fixed"><span id="gui-units-label" class="config-label">Units:</span></div>
                    <div class="left stretch"><select id="gui-units-toggle" class="config-select"></select></div>
                </div>
            </div>
            <div id="config-timestamps">
                <div class="row">
                    <div class="right small-font"><span id="gui-timestamp-label">gui:</span></div>
                    <div class="right small-font"><span id="gui-timestamp">v0.0.0 010180</span></div>
                </div>
                <div class="row">
                    <div class="right small-font"><span id="gui-data-timestamp-label">data:</span></div>
                    <div class="right small-font"><span id="gui-data-timestamp">n/a</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="mapping-wrapper" class="box-wrapper">
        <div id="mapping-content" class="box-content">
            <div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
            <div id="gui-mapping-label" class="box-label">Mapping Tools</div>
            <form id="mapping-checkboxes" class="small-font">
                <div><label id="gui-option-highlight-nonames-label"> <input type="checkbox"
                                                                            id="option-highlight-nonames"
                                                                            value="show-previous-routes"/> Highlight
                    unnamed streets </label> <label id="gui-option-show-previous-routes-label"> <input type="checkbox"
                                                                                                       id="option-show-previous-routes"
                                                                                                       value="show-previous-routes"/>
                    Show previous routes </label></div>
            </form>
            <a class="button mapping-button" id="open-osmbugs">OSM Bugs</a> <span class="quad mapping-button"></span> <a
                class="button mapping-button" id="open-editor">Editor</a> <span class="quad mapping-button"></span> <a
                class="button mapping-button" id="open-josm">JOSM</a> <a class="mapping-label"
                                                                         id="gui-external-tools-label">External
            Tools:</a></div>
    </div>
    <div id="main-wrapper" class="box-wrapper">
        <div id="main-input" class="box-content">
            <div id="input-mask-header"><select id="gui-language-toggle" class="top-left-button"></select>

                <div id="main-toggle" class="iconic-button cancel-marker top-right-button"></div>
            </div>
            <div id="input-mask">
                <div class="full">
                    <div id="input-source" class="input-marker">
                        <div class="left"><span id="gui-search-source-label" class="input-label nowrap">Start:</span>
                        </div>
                        <div class="center stretch"><input id="gui-input-source" class="input-box" type="text"
                                                           maxlength="200" value="" title="Enter start"/></div>
                        <div class="left">
                            <div id="gui-delete-source" class="iconic-button cancel-marker input-delete"></div>
                        </div>
                        <div class="right"><a class="button" id="gui-search-source">Show</a></div>
                    </div>
                    <div id="input-target" class="input-marker">
                        <div class="left"><span id="gui-search-target-label" class="input-label nowrap">End:</span>
                        </div>
                        <div class="center stretch"><input id="gui-input-target" class="input-box" type="text"
                                                           maxlength="200" value="" title="Enter destination"/></div>
                        <div class="left">
                            <div id="gui-delete-target" class="iconic-button cancel-marker input-delete"></div>
                        </div>
                        <div class="right"><a class="button" id="gui-search-target">Show</a></div>
                    </div>
                </div>
                <div class="quad"></div>
                <div class="full">
                    <div class="row">
                        <div class="left"><a class="button" id="gui-reset">Reset</a></div>
                        <div class="center"><select id="gui-engine-toggle" class="engine-select"></select></div>
                        <div class="right"><a class="button" id="gui-reverse">Reverse</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main-output" class="box-content">
            <div id="information-box-header"></div>
            <div id="information-box" class="information-box-with-small-header"></div>
            <div id="legal-notice" class="small-font">GUI2 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a>
                - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
        </div>
    </div>
</div>
</body>
</html>